<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <select id="a1"></select>
  <select id="a2"></select>
  <select id="a3"></select>
  <script>
    //当a1变化时，a2重新加载 a3织空
    //当a2变化时，a1无印象，a3重新加载
    //当a3变化，a1,a2无影响
    var g = function(v){
      return document.getElementById(v)
    }
    var area = [
      {
        "id":"100",
        "name":"郑州市",
        "child":[]
      },
      {
        "id":"200",
        "name":"开封市",
        "child":[]
      },
      {
        "id":"300",
        "name":"洛阳市",
        "child":[{
          "id":"310",
          "name":"伊滨区",
          "child":[]
        },{
          "id":"320",
          "name":"洛龙区",
          "child":[{
            "id":"321",
            "name":"安乐镇"
          },{
            "id":"323",
            "name":"关林"
          }]
          
        },{
          "id":"330",
          "name":"伊川县",
          "child":[]
        }]
      }
    
    ]
    
    //step1 
    for(var i=0; i<area.length; i++){
      var option = document.createElement("option");
      option.value = area[i].id
      option.innerHTML = area[i].name
      g("a1").appendChild(option)
    }
    function findCity(id){
      for(i=0; i<area.length; i++){
        if(area[i].id==id){
          return area[i];
        }
      }
    }
    //ste2
    g("a1").onchange = ()=>{
      city = findCity(this.value);
      g("a2").innerHTML = ""
      for(i=0; i<city.child.length; i++){
        var option = document.createElement("option");
        option.value = city.child[i].id
        option.innerHTML = city.child[i].name
        g("a2").appendChild(option)
      }
    }
    //step3
    function findCountry(city, id){
      for(var i=0; i<city.child.length; i++){
        if (city.child[i].id==id){
          return city.child[i];
        }
      }
    }
    g("a2").onchange = function(){
      city = findCity(g("a1").value);
      coun = findCountry(city, this.value)


      g("a3").innerHTML = ""

      for(var i=0; i<coun.child.length; i++){
        var option = document.createElement("option");
        option.value = coun.child[i].id
        option.innerHTML = coun.child[i].name
        g("a3").appendChild(option)
      }
    }
  </script>
</body>
</html>